<template>
  <div class="goods">
    <div class="menu-wrapper" ref="menuWrapper">
      <ul>
        <li v-for="(item,$index) in goods" class="menu-item" :class="{'current': currentIndex==$index}" @click="selectMenu($index,$event)">
          <span class="text">
            <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>
            {{item.name}}
          </span>
        </li>
      </ul>
    </div>
    <div class="foods-wrapper" ref="foodsWrapper">
      <ul>
        <li v-for="item in goods" class="food-list food-list-hook">
          <h1 class="title">{{item.name}}</h1>
          <ul>
            <li v-for="food in item.foods" class="food-item">
              <div class="icon">
                <img :src="food.icon" alt="" width="57" height="57">
              </div>
              <div class="content">
                <h2 class="name">{{food.name}}</h2>
                <p class="desc">{{food.description}}</p>
                <div class="extra">
                  <span class="count">月售{{food.sellCount}}份</span>
                  <span>好评率{{food.rating}}</span>
                </div>
                <div class="price">
                  <span class="now">￥{{food.price}}</span>
                  <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
                </div>
                <div class="cartcontrol-wrapper">
                    <cartcontrol :food="food"></cartcontrol>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>  
    </div>
    <shopcart ref="shopcart" :select-foods="selectFoods" :delivery-price="seller.deliveryPrice"  :min-price="seller.minPrice"></shopcart>
  </div>
  
</template>

<script>


import BScroll from 'better-scroll';
import shopcart from 'components/shopcart/shopcart';
import cartcontrol from 'components/cartcontrol/cartcontrol';

const ERR_OK = 0;
export default {
    props:{
      seller:{
        type:Object
      }
    },
    data(){
      return {
        goods:[],
        listHeight:[],
        scrollY:0
        }
    },
    computed:{
        currentIndex(){
            for(let i = 0;i<this.listHeight.length;i++){
                let height1 = this.listHeight[i];
                let height2 = this.listHeight[i+1];
                if(!height2 || (this.scrollY>=height1&&this.scrollY<height2)){
                    return i;  
                }
            }
            return 0;
        },
        selectFoods(){
            let foods = [];
            this.goods.forEach((good) => {
                good.foods.forEach((food) =>{
                    if(food.count){
                        foods.push(food);
                    }
                });
            });
            return foods;
        }
    },
    created(){
      this.classMap = ['decrease','discount','special','invoice','guarantee'];

      this.$http.get('/api/goods').then(response => {
        // get body data
        if(response.body.erron == ERR_OK){
          this.goods = response.body.data;
          this.$nextTick(()=>{
              this._initScroll();
              this._calculateHeight();
          })
          
        }
        
      });
    },
    methods: {
        selectMenu(index,event){
            //避免与PC端事件冲突
            if(!event._constructed){
                return
            }
            let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
            let el = foodList[index];
            this.foodsScroll.scrollToElement(el,200);
            //console.log(index);
        },
        _drop(target){
            this.$refs.shopcart.drop(target);
        },
      _initScroll(){
          this.menuScroll = new BScroll(this.$refs.menuWrapper,{
              click:true
          });
          this.foodsScroll = new BScroll(this.$refs.foodsWrapper,{
              probeType:3,
              click:true
          });
          this.foodsScroll.on('scroll',(pos)=>{
               this.scrollY = Math.abs(Math.round(pos.y));
           })
        //   var that = this;
        //   this.foodsScroll.on('scroll',function(pos){
        //       that.scrollY = Math.abs(Math.round(pos.y));
        //   }) 
        //   注意this的指向
      },
      _calculateHeight(){
          let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
          let height = 0;
          this.listHeight.push(height);
          for(let i =0;i<foodList.length; i++){
              let item = foodList[i];
              height = height + item.clientHeight;
              this.listHeight.push(height);
          }
        
          
      }
    },
    components:{
        shopcart,
        cartcontrol
    },
    events:{
        'cart.add'(target){
            // this._drop(target){

            // }
        }
    }
 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
@import '../../commend/less/minin.less';
.goods{
    display: flex;
    position: absolute;
    top: 174px;
    bottom:46px;
    width: 100%;
    overflow: hidden;
    .menu-wrapper{
        flex: 0 0 80px;
        width:80px;
        background:#f3f5f7;
        .menu-item{
            display: table;
            height: 54px;
            width: 56px;
            line-height: 14px;
            padding: 0 12px;
            .border-1px(rgba(7,17,27,0.1));
            &.current{
                font-weight:bold;
                position:relative;
                z-index:10;
                top:-1px;
                background:#fff;
                .text{
                    border:none;
                    color:#000;
                }
            }
            .icon{
                display: inline-block;
                width:12px;
                height:12px;
                margin-right:2px;
                vertical-align: top;
                &.decrease{
                  background: url("decrease_1@2x.png") no-repeat;
                  background-size: 100% 100%;
                }
                &.discount{
                  background: url("discount_1@2x.png") no-repeat;
                  background-size: 100% 100%;
                }
                &.guarantee{
                  background: url("guarantee_1@2x.png") no-repeat;
                  background-size: 100% 100%;
                }
                &.invoice{
                  background: url("invoice_1@2x.png") no-repeat;
                  background-size: 100% 100%;
                }
                &.special{
                  background: url("special_1@2x.png") no-repeat;
                  background-size: 100% 100%;
                }
            }
            .text{
                display: table-cell;
                font-size: 12px;
                vertical-align: middle;
                font-size: 12px;
                color: #7B7B7B;
            }
        }
    } 
    .foods-wrapper{
        flex: 1;
        .title{
            padding-left:14px;
            height:26px;
            line-height:26px;
            border-left:2px solid #d9dde1;
            font-size:12px;
            color: rgb(147,153,159);
            background:#f3f5f7;
        }
        .food-item{
            display: flex;
            margin:18px;
            padding-bottom: 18px;
            .border-1px(rgba(7,17,27,0.1));
            &:last-child{
                .border-none;
                margin-bottom: 0; 
            }
            .icon{
               flex: 0 0 57px;
               margin-right: 10px;
            }
            .content{
                flex: 1;
                .name{
                    margin: 2px 0 8px 0;
                    height: 14px;
                    line-height: 14px;
                    font-size:14px;
                    color: rgb(7,17,27);
                }
                .desc,.extra{
                    line-height: 16px;
                   
                    font-size: 10px;
                    color: rgb(147,153,159);
                }
                .desc{
                    margin-bottom: 8px;
                }
                .extra{
                    line-height: 10px;
                    .count{
                        margin-right: 10px;
                    }
                }
                .price{
                    font-weight: 700;
                    line-height: 24px;
                    .now{
                        margin-right: 8px;
                        font-size:14px;
                        color: rgb(240 , 20, 20);
                        font-weight: 700;
                    }
                    .old{
                        text-decoration: line-through;
                        font-size: 10px;
                        color: rgb(147,153,159);
                        font-weight: 700;
                    }
                }
                .cartcontrol-wrapper{
                    position:absolute;
                    right:0;
                    bottom:12px;
                }
            }
        }
    }
}


</style>

